<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mail</title>
<link rel="stylesheet" th:href="@{/easy/css/bootstrap.css}" />
<link rel="stylesheet" th:href="@{/icon/css/font-awesome.min.css}" />
</head>
<body class="bg-c">
	<div class="container-fluid" ms-controller="vm">
		<div class="row">
			<div style="font-size: 18px;"
				class="col text-center bg-primary text-white">收 件 箱</div>
		</div>
		<div class="row mt-1">
			<div class="col">
				<div>
					<span style="color: maroon; font-size: 18px; font-weight: bold;">收件箱</span>
				</div>
			</div>
		</div>
		<div class="row mt-1">
			<div class="col">
				<div>
					<button class="btn btn-sm btn-danger" onclick="delAll()">一键删除</button>
				</div>
			</div>
		</div>
		<div class="row mt-2">
			<div class="col">
				<table class="table table-striped">
					<tr>
						<td><i class="fa fa-envelope" aria-hidden="true"></i></td>
						<td style="width: 10%">发件人</td>
						<td>主题</td>
						<td style="width: 15%">时间</td>
						<td style="width: 15%">操作</td>
					</tr>
					<tr ms-for="s in @list">
						<td><i ms-class="s.readflag|readFlag" aria-hidden="true"></i></td>
						<td style="width: 15%">{{s.senderAccount}}</td>
						<td
							style="display: inline-block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 65%">{{s.msgTitle}}</td>
						<td style="width: 25%">{{s.createtime|date("yyyy-MM-dd
							HH:mm:ss")}}</td>
						<td style="width: 15%"><a title="查看"
							ms-attr="{href:'/mona/MsgInfo/seeMail?id='+s.id}"><i
								class="fa fa-folder-open-o mr-1 text-danger" aria-hidden="true"></i>&nbsp;|&nbsp;</a><a
							title="删除" ms-attr="{rowid:s.id}" onclick="delMail(this)"><i
								class="text-danger fa fa-trash" aria-hidden="true"></i></a>&nbsp;|&nbsp;<a
							ms-attr="{changeid:s.id}" title="标记为未读" onclick="closeMail(this)"><i
								class="text-danger fa fa fa-envelope" aria-hidden="true"></i></a></td>
					</tr>
				</table>
				<!-- 分页 -->
				<div class="row mt-2">
					<div class="col"></div>
					<div class="col">
						<!-- 分页按钮 -->
						<div class="footer">
							<ul class="pagination" id="pager"></ul>
						</div>
					</div>
					<div class="col"></div>
				</div>
			</div>

		</div>
	</div>
	<!-- js -->
	<script th:src="@{/easy/js/jquery.js}"></script>
	<script th:src="@{/easy/js/avalon.js}"></script>
	<script th:src="@{/page/jqpaginator.js}"></script>
	<script th:src="@{/layer/layer.js}"></script>
	<script>
		//
		var vm = avalon.define({
			$id : "vm",
			list : [],
			pageNum : "1",
			total : 1,
		});
		//--分页
		$("#pager").jqPaginator({
			totalPages : 10,
			visiblePages : 5,
			currentPage : 1,
			onPageChange : function(num, type) {
				vm.pageNum = num;
				showMsg();
			}
		});

		function showMsg(num) {
			if (num == 0) {
				vm.pageNum = 1;
				$("#pager").jqPaginator("option", {
					currentPage : 1
				});
			}
			$.post("/mona/MsgComm/findAll", {
				pageNum : vm.pageNum,
				pageSize : "10",
			}, function(data) {
				if(data.totalElements==0){
					vm.list = data.content;
					$("#pager").jqPaginator("option", {
						totalPages : 1,
						currentPage :1
					});
					return;
				}
				
				$("#pager").jqPaginator("option", {
					totalPages : data.totalPages
				});
				vm.list = data.content;
			}, "json");
		}

		//-- seeMail--使用链接完成

		//--delMail
		function delMail(obj) {
			layer.confirm("确认删除吗?", function() {
				$.post("/mona/MsgInfo/delMail", {
					id : $(obj).attr("rowid")
				}, function(data) {
					showMsg(1);
					layer.msg(data);
					setTimeout("location.reload();", 1000);
				});
			});
		}
		//-- 改未读图标为已读
		avalon.filters.readFlag = function(str) {
			if (str == 0)
				return "fa fa-envelope-o";
			if (str == 1)
				return "fa fa-envelope-open-o";
		}
		//-- 改已读图标为未读 closeMail
		function closeMail(obj) {
			$.post("/mona/MsgComm/changeFlag", {
				changeId : $(obj).attr("changeid")
			}, function(data) {
				showMsg(1);
			});
		}

		//--一键删除所有delAll
		function delAll() {
			layer.confirm("确认全部删除吗?", function() {
				$.post("/mona/MsgComm/delAll", {}, function(data) {
					showMsg();
					setTimeout("location.reload();", 1000);
				});
			});
		}
	</script>
</body>
</html>